<template>
  <div class="login_box">
        <div class="login_l_img"><img src="./images/login-img.png" /></div>
        <div class="login">
            <div class="login_logo"><a href="#"><img src="./images/login_logo.png" /></a></div>
            <div class="login_name">
                 <p>登录</p>
            </div>
              <input type="text"
                v-model="name"
                @keyup.enter="checkVal"
                onfocus="if(this.value=='用户名'){this.value=''}"
                onblur="if(this.value==''){this.value='用户名'}"
              />
              <input
                v-model="pwd"
                @keyup.enter="checkVal" type="password" id="password"
                onfocus="document.getElementById('password_text').style.display='none';"
                onblur="if(this.value==''){document.getElementById('password_text').style.display='block';};"
              />
              <span id="password_text"
                onclick="this.style.display='none';document.getElementById('password').focus()"
              >密码
              </span>
              <input type="button" @click="checkVal" value="登录" style="width:100%;" />
              <p class="error">{{error}}</p>
        </div>
        <div class="copyright">杭州碧海银帆网络技术有限公司 版权所有©2016-2028 技术支持电话：000-00000000</div>
  </div>

</template>

<script>
export default {
  name: 'Login',
  data () {
    return {
      name: '用户名',
      pwd: '',
      error: ''
    }
  },
  methods: {
    checkVal () {
      if (this.name === '') {
        this.error = '用户名不能为空'
        return false
      } else if (this.pwd === '') {
        this.error = '密码不能为空'
        return false
      } else {
        this.isLogin()
      }
    },
    async isLogin () {
      try {
        await this.$store.dispatch('fetchUsers')
        const users = this.$store.state.users
        const { name } = this
        const currentUser = users.filter((p) => {
          return p.username === name
        })[0]
        if (!currentUser) {
          return '用户不存在'
        } else if (currentUser.password !== this.pwd) {
          return '密码错误'
        } else {
          this.$store.commit('login', currentUser)
          this.$router.push(this.$route.query.redirect || '/')
        }
      } catch (error) {
        this.error = error
        throw error
      }
    }
  }
}
</script>

<style>
* { font: 13px/1.5 '微软雅黑'; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -box-sizing: border-box; padding:0; margin:0; list-style:none; box-sizing: border-box; }
body, html { height:100%; overflow:hidden; }
body {background: url(../../assets/images/bg_skin.jpg); background-size: cover; }
a { color:#27A9E3; text-decoration:none; cursor:pointer; }
img{ border:none;}

.login_box{ width:1100px; margin:120px auto 0;}
.login_box .login_l_img{ float:left; width:432px; height:440px; margin-left:50px;}
.login_box .login_l_img img{width:500px; height:440px; }
.login {height:360px; width:400px; padding:50px; background-color: #ffffff;border-radius:6px;box-sizing: border-box; float:right; margin-right:50px; position:relative; margin-top:50px;}
.login_logo{ display: none;width:120px; height:120px; border:5px solid #93defe;border-radius:100px; background:#fff; text-align:center; line-height:110px; position:absolute; top:-60px; right:140px;}
.login_name{ width:100%; float:left;}
.login_name p{ width:100%;  font-size:20px; color:#444; padding:10px 0 20px;font-weight: bold;}
.login_logo img{ width:60px; height:60px;display: inline-block; vertical-align: middle;}
input[type=text], input[type=file], input[type=password], input[type=email], select { border: 1px solid #DCDEE0; vertical-align: middle; border-radius: 3px; height: 50px; padding: 0px 16px; font-size: 14px; color: #555555; outline:none; width:100%;margin-bottom: 15px;line-height:50px; color:#888;}
input[type=text]:focus, input[type=file]:focus, input[type=password]:focus, input[type=email]:focus, select:focus { border: 1px solid #27A9E3; }
input[type=submit], input[type=button] { display: inline-block; vertical-align: middle; padding: 12px 24px; margin: 0px; font-size:16px; line-height: 24px; text-align: center; white-space: nowrap; vertical-align: middle; cursor: pointer; color: #ffffff; background-color: #27A9E3; border-radius: 3px; border: none; -webkit-appearance: none; outline:none; width:100%; }
.copyright { font-size:14px; color:#fff; display:block;width:100%; float:left; text-align:center; margin-top:60px;}

#password_text{vertical-align: middle; border-radius: 3px; height: 50px;padding: 0px 16px; font-size: 14px; color: #888; outline:none; width:100%;margin-top: -65px;display: block; line-height:50px; margin-bottom: 15px;position: relative; z-index: 9;}
.error{text-align: center;line-height: 40px;}
</style>
